<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="Scripts/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
		<style>
			#div1,
			#div3 {
				height: 200px;
				width: 200px;
				border: 1px solid #00f;
				margin-bottom: 10px;
			}

			#div2 {
				height: 100px;
				width: 100px;
				background: yellow;
			}
		</style>
		<script>
			var div1, div2, div3, msg;
			window.onload = function() {
				div1 = document.getElementById("div1");
				div2 = document.getElementById("div2");
				div3 = document.getElementById("div3");
				msg = document.getElementById("msg");

				div2.ondragstart = function() {
					msg.innerHTML += "div2开始拖动了<br/>";
				}
				div2.ondrag = function() {
					msg.innerHTML += "拖动中<br/>";
				}
				div2.ondragend = function() {
					msg.innerHTML += "拖动结束<br/>";
				}

				div1.ondragover = function(e) {
					e.preventDefault();
				}
				div1.ondrop = function(e) {
					div1.appendChild(div2);
				}
				div3.ondragover = function(e) {
					e.preventDefault();
				}
				div3.ondrop = function(e) {
					div3.appendChild(div2);
				}

				$("#div1").data("name", "电池");
				alert($("#div1").data("name"));

				div1.setAttribute("data-order-price", 998.7);
				alert(div1.getAttribute("data-order-price"));
			}
		</script>
	</head>

	<body>
		<div id="div1" data-order-price="98.5" data-name="充电宝"></div>
		<div id="div3"></div>
		<div id="div2" draggable="true"></div>
		<h3 id="msg"></h3>
		<input type="color" onchange="document.bgColor=this.value" />
		<a href="mailto:99519876@qq.com">邮件</a>
	</body>

</html>
